<template>
  <div class='login'>
      <span class="close">
        <i class="iconicon-test iconfont"></i>
      </span>
      <h2 class='logo'>
        <i class="iconnew iconfont"></i>
      </h2>
      <Myinput 
      v-model="user.username"
      :rules="rules.username"
         type="text"
         placeholder="用户名/手机号码"
         msg="手机号码不合法"
      ></Myinput>
      <Myinput 
      v-model="user.nickname"
      :rules="rules.nickname"
        type="text"
         placeholder="昵称"
         msg="昵称2到10"
      ></Myinput>
      <Myinput  
      v-model="user.password"
      :rules="rules.password"
         type="passwrod"
         placeholder="密码3到10"
      ></Myinput>
      <div class="tips"> 
        没有账号？去 <router-link to='/login'>登陆</router-link> 
      </div>
      <MyButton type='primary' @click="registerFn">注册</MyButton>
      
  </div>
</template>

<script>
import MyButton from "../components/MyButton.vue";
import Myinput from "../components/Myinput.vue";
import {userRegisterAPL} from "../apis/user"
export default {
    data () {
        return {
            user:{
                username:'',
                password:'',
                nickname:'',
            },
            rules:{
                username:/^1\d{10}$|^[a-zA-Z]\w{2,10}$|^1\d{4,5}$/,
                password:/^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/,
                nickname:/^.{2,10}$/,
            }
        }
    },
    components:{
        MyButton,
        Myinput
    },
    methods: {
      registerFn(){
          if(this.rules.username.test(this.user.username)&&
             this.rules.password.test(this.user.password)&&
             this.rules.nickname.test(this.user.nickname)){
                 userRegisterAPL(this.user).then((res)=>{
                     console.log(res)
                     const {message} = res.data;
                     if(message==="注册成功"){
                         this.$toast.success('注册成功,欢迎入坑');
                         this.$router.push({path: "/login"})
                     }else{
                         this.$toast.fail(message);
                     }
                 })
             }else{
                alert("输入数据有错")
            }
      }
    }
    

}
</script>

<style lang="less" scoped>
.close{
  position: fixed;
  left:20px;
  top:20px;
  .iconfont{
     font-size: 20px;
     color: #ccc;
   }
}
.logo{
   display: flex;
   justify-content: center;
   padding: 80px 0 20px;
   .iconfont{
     font-size: 120px;
     color: #d81e06;
   }
}
.tips{
  font-size:14px;
  padding:0 36px;
  text-align: right;
}
</style>